<template>
    <div class="enroll_cent">
        <solid-window class="window" :msg="enrollothermsg.popwarn" ref="child"></solid-window>
        <!--      -------------------上侧--------图片显示区域-->


        <div class="enroll_inputmsg">
            <!--          邮箱输入的div容器-->
            <div>
                <div class="enroll_QQ changeline"
                     @mouseenter="emailmouse('QQ')"
                     @mouseleave="emailleave('QQ')">
                    <label>邮箱地址</label>
                    <!--                  竖线-->

                    <input class="input1"
                           type="text"
                           placeholder="建议使用常用的的邮箱地址"
                           v-model="enroll.email"
                           @focus.stop="showcannnel(1);showwarn('enroll_QQ_warn',true)"
                           @blur.stop="showcannnel(1);showwarn('enroll_QQ_warn',false)"
                    >

                    <i class="enroll_img_i"
                       @click="clearEmail()"
                    ></i>
                </div>
                <!--              格式错误的提示-->
                <span class="enroll_QQ_warn">
                      <i class="enroll_img_g"></i>
                      {{this.mailwarnmsg}}
                  </span>
            </div>

            <!--          验证码的div容器-->
            <div>
                <div class="enroll_code changeline"
                     @mouseenter="emailmouse('code')"
                     @mouseleave="emailleave('code')">
                    <label>邮箱验证码</label>

                    <input  class="input2"
                            v-model="enroll.execode"
                            type="password"
                            placeholder="邮件验证码"
                    >

                    <button id="button_id" @click="checkEmail();showcannnel(0)"
                    >重新获取</button>
                </div>
                <span class="enroll_code_warn">
                       <i class="enroll_img_g enroll_img_w"></i>
                      {{this.codewarnmsg}}
                </span>
            </div>
<!--            设置用户名-->
            <div>
                <div class="enroll_QQ changeline">
                    <label>账号名</label>
                    <!--                  竖线-->

                    <input class="input3"
                           type="text"
                           v-model="enroll.name"
                           placeholder="账户唯一，可以用来登录"
                           @focus.stop="showwarnmsg('enroll_name_warn',true)"
                           @blur.stop="showwarnmsg('enroll_name_warn',false)"
                           @input.stop="checkenrollmsg('enroll_name_warn')"

                    >
                </div>
                <!--              格式错误的提示-->
                <span class="enroll_name_warn">
                      <i class="enroll_img_w"></i>
                      {{this.userwarnmsg}}
                  </span>
            </div>

<!--          验证码的div容器-->
            <div>
                <div class="enroll_code changeline">
                    <label>设置密码</label>

                    <input  class="input4"
                            type="text"
                            v-model="enroll.password"
                            placeholder="建议两张或两种以上的字符组合"
                            @focus.stop="showwarnmsg('enroll_pwd_warn',true)"
                            @blur.stop="showwarnmsg('enroll_pwd_warn',false)"
                            @input.stop="checkenrollmsg('enroll_pwd_warn')"
                    >
                    <i class="enroll_img_i"
                       @click="clearEmail()"
                    ></i>
                </div>
                <span class="enroll_pwd_warn">
                       <i class="enroll_img_w"></i>
                      {{this.pwdwarnmsg}}
                </span>
            </div>

            <div class="agreebox">
                <div class="sim_checkbox" @click.stop="checkbox('sim_checkbox')"></div>
                我已阅读并同意
                <a href="  https://transformers.jd.com/policies/#/registration_agreement  " target="_blank" clstag="h|keycount|biguser|protocol">《企业用户注册协议》</a>
                <a href=" https://transformers.jd.com/policies/#/privacy_policy " target="_blank">《企业用户隐私政策》</a>
            </div>

            <!--          提交按钮的容器-->
            <div class="clearfix">
                <div class="enroll_subimt">
                    <input @click="mailgetcode()" type="submit" >
                </div>

                <a class="reg-other-person" href="/#/enrollview/mail">
                    <i class="reg-ohter-icon"></i>
                    个人用户注册
                </a>
            </div>
        </div>
    </div>
</template>

<script>
import {decryptDes, encryptDes} from "@/utill/des";
import SolidWindow from "@/components/sub/SolidWindow.vue";

export default {
    name: "CmailEnroll",
    components: {SolidWindow},
    component() {
    },
    data(){
        return{
            isleave:true,

            enroll:{
                email:'',
                code:'',
                execode:'',
                name:'',
                password:'',
                utype:1,
            },
            enrollothermsg:{
                mailwarn:'验证完成后，可以用该邮箱进行登录或者找回密码',
                codewarn:'验证码已发送，120秒内输入有效',
                pwdwarn:'建议使用字母、数字和符号两种及以上的组合',
                popwarn: "",
            },
            enrollwarnmsg:{
                userwarn:'支持中文、英文、数字、“-”、“_”的组合，4-20个字符',
                pwdwarn:'建议使用字母、数字和符号两种及以上的组合，8-20个字符',
                execpwdwarn:'请再次输入密码'
            },
            // 取消图片
            falge:true,
            // 复选框
            flages:false,
            // 名字的规格
            flagen:false,
            //密码的
            flagep:false,
            //验证码是否正确
            flagec:false,

        }
    },
    methods: {
        test(){
            alert("测试用例")
        },
        warnwindow(msg,warn){
            document.getElementById(msg).disabled=true;
            this.enrollothermsg.popwarn=warn;
            this.$refs.child.Scribblewindow();
            document.getElementById(msg).disabled=false;
        },

        checkbox(msg){
            if (this.flages==false){
                document.querySelector('.'+msg).style="background-position: -107px -156px;";
                this.flages=true;
            }else if(this.flages==true){
                document.querySelector('.'+msg).style="background-position: -107px -400px;";
                this.flages=false;
            }

        },

//??????????获取是否验证码是否正确?????????未完成
        // 登录的功能实现
        async mailgetcode() {
            console.log("skldjflsf")
            // 对复选框的是否勾选进行判断
            if(this.flages==false){
                this.warnwindow("button_id","请同意该协议");
                // 对名字的格式是否符合规定的判断
            }else if (this.flagen==false){
                this.warnwindow("button_id","账户名格式错误，请填写正确格式");
            //     对密码是否符合规定的判断
            }else if (this.flagep==false){
                this.warnwindow("button_id","密码格式错误，请填写正确格式");

            }else if (this.enroll.execode!=JSON.parse(decryptDes(this.enroll.code,this.$store.state.EBC))){
                this.warnwindow("button_id","验证码错误");
            } else{
                {
                    this.enroll.code=null;
                }
                // 成功
                this.$router.push({path:'/enrollview/cmsg', query:{msg:this.enroll}})
            }
        },
//显示取消的按钮
        showcannnel(msg){
            if (msg==1){
                document.querySelector('.enroll_img_i').style="display: block;";
            }else if (msg==0){
                document.querySelector('.enroll_img_i').style="display: none;";
            }

        },
//         ----------------------账户和密码的方法----------
//使警告的颜色变换为灰色
        changegrey(codemsgs){
            // 警告的变换正常
            document.querySelector('.'+codemsgs)
                .querySelector('i').style='background-position: -0px -100px;';
            document.querySelector('.'+codemsgs).style="display: flex;color: #999;";
        },
//使警告的颜色变换为红色
        changered(codemsgs){
            // 警告的颜色变换
            console.log("警告颜色为红色")
            document.querySelector('.'+codemsgs).style='display: flex;color: #f91;';
            document.querySelector('.'+codemsgs)
                .querySelector("i").style='background-position: -17px -100px;';
        },
//显示取消的按钮
        showwarnmsg(msg,flage){
            // enroll_code_warn enroll_exec_warn enroll_QQ_warn
            const warn='.'+msg
            if (flage==true){

                //console.log("获得焦点+显示+参数"+msg)

                document.querySelector(warn).querySelector('i').style='background-position: -0px -100px;';
                document.querySelector(warn).style="display: flex;";

            }else if (flage==false){
                document.querySelector(warn).style="display: none;";
            }else {
                console.log("确认信息参数错误");
            }

        },
        //检查的事假
        checkenrollmsg(codemsg){
            if (codemsg=='enroll_name_warn'){
                this.flagen=false;
                const reg = /^[a-zA-Z0-9_\u4e00-\u9fa5]+$/;
                const msg=this.enroll.name;
                if (msg==''||msg==null){
                   // console.log("账户的名成格式+为空的错误格式="+msg)
                    // 变换灰色
                    this.changegrey(codemsg)
                    this.enrollwarnmsg.userwarn='支持中文、英文、数字、“-”、“_”的组合，4-20个字符';
                }else if (reg.test(msg)){
                    //console.log("账户的名成格式+正确格式的数值="+msg)
                    // 变换灰色
                    this.changegrey(codemsg)
                    //账户名的格式正确
                    this.flagen=true;
                    this.enrollwarnmsg.userwarn='支持中文、英文、数字、“-”、“_”的组合，4-20个字符';
                } else if (!reg.test(msg)){
                    //console.log("账户的名成格式+错误格式的数值="+msg)
                    // 变换红色
                    this.changered(codemsg)
                    this.enrollwarnmsg.userwarn='格式错误，仅支持汉字、字母、数字、“-”、“_”的组合'
                }
                //密码
            }else if(codemsg=='enroll_pwd_warn'){
                this.flagep=false;
                const regs = /^(?![a-zA-Z]+$)(?!\d+$)(?![^\da-zA-Z\s]+$).{1,9}$/;
                const msgs=this.enroll.password;
                if (msgs==''||msgs==null){
                    //console.log("账户的密码成格式+错误格式的数值="+msgs)
                    // 变换灰色
                    this.changegrey(codemsg)
                    document.querySelectorAll('.enroll_img_i')[0].style="display: none";
                    this.enrollwarnmsg.pwdwarn='建议使用字母、数字和符号两种及以上的组合，8-20个字符';
                } else if (!regs.test(msgs)){
                    //console.log("账户的名成格式+错误格式的数值="+msgs)
                    // 变换红色
                    this.changered(codemsg)
                    document.querySelectorAll('.enroll_img_i')[0].style="display: none";
                    this.enrollwarnmsg.pwdwarn='格式错误，建议使用两种或两种以上字符组合'
                    //清空所填写的错误密码
                    document.querySelector('.input4').innerHTML='';
                }else if (regs.test(msgs)){
                    //console.log("账户的名成格式+错误格式的数值="+msgs)
                    // 变换灰色
                    this.changegrey(codemsg)
                    //密码的格式正确
                    this.flagep=true;
                    document.querySelectorAll('.enroll_img_i')[0].style="display: block";
                    this.enrollwarnmsg.pwdwarn='建议使用字母、数字和符号两种及以上的组合，8-20个字符';
                }
                //确认密码
            }else if(codemsg=='enroll_exec_warn'){
                const msg=this.enrollmsg.userpwd
                const msgs=this.enrollmsg.execpwd;
                if (msgs==''||msgs==null){
                    //console.log("账户的名成格式+错误格式的数值="+msgs)
                    // 变换灰色
                    this.changegrey(codemsg)
                    document.querySelectorAll('.enroll_img_i')[1].style="display: none";
                    this.enrollwarnmsg.pwdwarn='请再次输入密码';
                } else if (msg!=msgs){
                    //console.log("账户的名成格式+错误格式的数值="+msgs)
                    // 变换红色
                    document.querySelectorAll('.enroll_img_i')[1].style="display: none";
                    this.changered(codemsg)
                    this.enrollwarnmsg.pwdwarn='两次输入的密码不一致'
                }else if (msg==msgs){
                    //console.log("账户的名成格式+错误格式的数值="+msgs)
                    // 变换红色
                    document.querySelectorAll('.enroll_img_i')[1].style="display: block";
                    this.changegrey(codemsg)
                    this.enrollwarnmsg.pwdwarn='两次输入的密码不一致'
                }
            }

        },
//         -------------------------------账户和密码的方法结束-----------------
//获取验证码的倒计时
        changebuttonbackground(){
            this.isleave=false;
            //×图片隐藏

            //console.log("获取验证码的按钮方法开始"+this.isleave)
            // 获取验证码的按钮变色
            document.querySelector('.enroll_code')
                .querySelector('button').style=""+
                "background: #f4f5f6;" +
                "background: linear-gradient(to right,#FFFFFF,#F5F5F5,#DCDCDC);";

            document.querySelector('.input2').style="border-right-width: 0px;";

            // 倒计时的时间
            var wait = 3;
            let that=this;
            let rong=document.getElementById("button_id");
            let clearba=document.querySelector('.enroll_code').querySelector('button');
            let warnmsg=document.querySelector('.enroll_code_warn');
            const intervalId= setInterval(function refer() {

                if (rong==null||clearba==null||warnmsg==null){
                    clearInterval(intervalId);
                }

                if (wait > 0) {
                    rong.innerHTML =wait+"秒后重新获取";
                    wait--
                    //console.log("获取验证码的按钮方法的回调函数"+that.isleave)
                    // 验证码已发送，120秒内输入有效、、的显示
                   warnmsg.style="display: flex";
                } else {
                    rong.innerHTML ="重新获取";
                    // 样式的去除
                    clearba.style="";
                    // ---验证码已发送，120秒内输入有效---警告的隐藏
                    warnmsg.style="display: none;"

                    clearInterval(intervalId);
                    that.isleave=true;

                }
            }, 1000)

            //console.log("获取验证码的按钮方法结尾"+this.isleave)
        },
// 邮件悬浮触发事件
        showwarn(msg,flage){
            if(flage==true){
                //  验证完成后，可以用该邮箱进行登录或者找回密码
                document.querySelector('.'+msg).style="display: flex;";
            }else if(flage==false){
                document.querySelector('.'+msg).style="display: none;";
            }

        },

//光标进入时的样式变化
        emailmouse(conde){
            //console.log("进入验证码按钮的方法"+this.isleave)
            if(this.isleave){
                const QQline="" +
                    "border-color: rgb(153, 153, 153);" +
                    "border-style: solid;" +
                    "border-width: 1px;";
                const inputline="" +
                    "border-color: rgb(153, 153, 153);" +
                    "border-style: solid;" +
                    "border-width: 0px;";
                if (conde=='QQ'){
                    document.querySelector('.enroll_QQ').style=QQline;
                    document.querySelector('.input1').style=inputline+"border-left-width: 1px;";
                }else if (conde=='code'){
                    document.querySelector('.enroll_code').style=QQline;
                    document.querySelector('.input2').style=inputline+"border-left-width: 0px;border-right-width: 1px;";
                }
            }
        },
//光标离开的样式变化
        emailleave(conde){
            //console.log("离开验证码按钮的方法"+this.isleave)
            if (this.isleave==true){
                const QQline="" +
                    "border-color: rgb(221, 221, 221);" +
                    "border-style: solid;" +
                    "border-width: 1px;";
                const inputline="" +
                    "border-color: rgb(221, 221, 221);" +
                    "border-style: solid;" +
                    "border-width: 0px;" +
                    "border-left-width: 1px;";
                if (conde=='QQ'){
                    document.querySelector('.enroll_QQ').style=QQline;
                    document.querySelector('.input1').style=inputline+"border-left-width: 1px;";
                }else if (conde=='code'){
                    document.querySelector('.enroll_code').style=QQline;
                    document.querySelector('.input2').style=inputline+"border-left-width: 0px;border-right-width: 1px;";
                }
            }
        },

//检查邮件
        async checkEmail(){
            const emailmsg=this.enroll.email;
            document.querySelector('.enroll_QQ_warn').style="display: flex;";
            if (emailmsg==null||emailmsg==''){
                // alert('请输入邮箱地址')
                this.enrollothermsg.mailwarn='请输入邮箱地址'
                //console.log("邮箱的地址为空")
            }else {
                var reg = /^[A-Za-z0-9]+([_\.][A-Za-z0-9]+)*@([A-Za-z0-9\-]+\.)+[A-Za-z]{2,6}$/;
                if (!reg.test(emailmsg)){
                    //console.log("验证邮箱的格式+错误格式的数值"+emailmsg)
                    this.enrollothermsg.mailwarn='格式错误'
                }else {
                    // ！！！！颜色变换！！！！
                    this.changebuttonbackground();

                    document.querySelector('.enroll_QQ_warn').style="display: none;";
    //???请求后端获取验证码???????未完成

                    let res = await this.$http.post("cmailcode", this.enroll.email);
                    //这里data存放的是后端返回的用户名，这里可以根据需要返回指定数据

                    this.flagec=false;
                    if(res.code==200){
                        // 成功的话讲获取到额验证码保存到execode中去
                        // this.$store.commit("login", res.data.token);
                        // this.$router.push('/');
                        const encrypts = encryptDes(JSON.stringify(res.data.code),this.$store.state.EBC);
                        this.enroll.code=encrypts;

                        this.flagec=true;
                        // 发送验证码后的提醒
                        this.warnwindow("button_id","验证码已发送，请注意查收");

                    }else if (res.code==403) {
                        // console.log("邮箱验证码获取失败");
                        // this.$router.push('/')
                        this.warnwindow("button_id","验证码发送失败，请重新发送")
                    }

                }
            }

        },
//清除邮件地址
        clearEmail(){
            // console.log("之前的数值")
            // console.log(this.enroll.email)
            this.enroll.email='';
            document.querySelector('.enroll_QQ_warn').style="" +
                "display: none;";
        }
    },
    computed:{
        userwarnmsg:function (){
            return this.enrollwarnmsg.userwarn;
        },
        pwdwarnmsg:function (){
            return this.enrollwarnmsg.pwdwarn;
        },
        execpwdwarnmsg:function () {
            return this.enrollwarnmsg.execpwdwarn;
        },
        mailwarnmsg:function (){
            return this.enrollothermsg.mailwarn;
        },
        codewarnmsg:function (){
            return this.enrollothermsg.codewarn;
        },
        isleavef:function () {
            return this.isleave;
        }
    },
    created() {

    },
    mounted() {
        // ------当前的样式-----------//
        document.querySelectorAll('.enroll_two')[0]
            .querySelector('span').style="background-position: 0 -200px;" +
            "color: #fff";
        document.querySelectorAll('.enroll_two')[0]
            .querySelector('p').style=" color: #3b4";
        // ------当前的样式-----------//
        document.querySelectorAll('.enroll_dots')[0].style='background-position: 0 -100px;';
    },
    watch: {

    },
}
</script>

<style scoped>
.enroll_cent{
    width: 1260px;
    height: auto;
    min-height: 507px;
    /*居中设置*/
    margin: auto;
    margin-bottom: 100px;
}
/*---------中下侧------------注册的信息------*/
.enroll_cent .enroll_inputmsg{
    width: 400px;
    height: auto;

    margin: auto;
    display: inline-block;
}
/*---------每一个的输入邮箱和验证码的外部div容器--*/
.enroll_cent .enroll_inputmsg div{
    width: 400px;
    height: 86px;
    margin-top: 9px;
    /*background-color: chartreuse;*/
}

.enroll_cent .enroll_inputmsg div div{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: auto;
    height: 52px;
    /*overflow: hidden;*/

    /*边框的线条*/
    border-color: rgb(221, 221, 221);
    border-style: solid;
    border-width: 1px;
}

/*-----提示信息-----------*/
.enroll_cent .enroll_inputmsg div label{
    width: 108px;
    font-size: 15px;
    color: #666;
}
/*输入框*/

.enroll_cent .enroll_inputmsg div input{
    width: 174px;
    height: 95%;
    color: rgb(72, 67, 67);

    /*输入框的左侧竖线   |   */
    border-color: rgb(221, 221, 221);
    /*border-color: darkorchid;*/
    border-style: solid;
    border-width: 0px;
    border-left-width: 0px;
    border-right-width: 1px;
    outline: none;
}
.enroll_cent .enroll_inputmsg div .input1{
    width: 174px;
    height: 95%;
    color: rgb(72, 67, 67);

    /*输入框的左侧竖线   |   */
    border-color: rgb(221, 221, 221);
    /*border-color: darkorchid;*/
    border-style: solid;
    border-width: 0px;
    border-left-width: 1px;
    border-right-width: 0px;
    outline: none;
}
.enroll_cent .enroll_inputmsg div .input3{
    width: 174px;
    height: 95%;
    color: rgb(72, 67, 67);

    /*输入框的左侧竖线   |   */
    border-color: rgb(221, 221, 221);
    /*border-color: darkorchid;*/
    border-style: solid;
    border-width: 0px;
    border-left-width: 0px;
    border-right-width: 0px;
    outline: none;
}
.enroll_cent .enroll_inputmsg div .input4{
    width: 174px;
    height: 95%;
    color: rgb(72, 67, 67);

    /*输入框的左侧竖线   |   */
    border-color: rgb(221, 221, 221);
    /*border-color: darkorchid;*/
    border-style: solid;
    border-width: 0px;
    border-left-width: 1px;
    border-right-width: 0px;
    outline: none;
}


.enroll_cent .enroll_inputmsg .enroll_QQ .enroll_img_i{
    position: relative;
    float: right;
    right: -82px;
    display: none;
    width: 12px;
    height: 12px;
    background: url('@/assets/bckground/reg-icon.png') no-repeat;
    background-position: -80px -160px;
    /*background-color: blue;*/
}

.enroll_cent .enroll_inputmsg span{
    display: flex;
    justify-content: flex-start;
}

/*警告图片*/
.enroll_cent .enroll_inputmsg span .enroll_img_g{
    display: block;
    width: 16px;
    height: 16px;

    background-position: -0px -100px;
    background-image: url("@/assets/icon/icon.png");
}
.enroll_cent .enroll_inputmsg span .enroll_img_w{
    display: block;
    width: 16px;
    height: 16px;

    background-position: -0px -100px;
    background-image: url("@/assets/icon/icon.png");
}
/*建议使用字母、数字和符号两种及以上的组合*/
.enroll_cent .enroll_inputmsg div .enroll_QQ_warn{
    color: #999;
    font-size: 12px;
    display: none;
}
/*格式错误/验证完成后，可以用该邮箱进行登录或者找回密码*/
.enroll_cent .enroll_inputmsg div .enroll_pwd_warn{
    color: #999;
    font-size: 12px;
    display: none;
}
/*验证码已发送，120秒内输入有效*/
.enroll_cent .enroll_inputmsg div .enroll_code_warn{
    color: #999;
    font-size: 12px;
    display: none;
}
.enroll_cent .enroll_inputmsg div .enroll_name_warn{
    color: #999;
    font-size: 12px;
    display: none;
}
/*验证码已发送，120秒内输入有效*/
.enroll_cent .enroll_inputmsg div .enroll_pwd_warn{
    color: #999;
    font-size: 12px;
    display: none;
}
.enroll_cent .enroll_inputmsg div div button{

    all: unset;
    width: 118px;
    height: 52px;
    border: 0px;
    cursor: pointer;
}
/*--------提交--button--*/
.enroll_cent .enroll_inputmsg .clearfix .enroll_subimt{
    border-style: none;
    border-width: 0px;
}
.enroll_cent .enroll_inputmsg .enroll_subimt input{
    color: #fff;
    background-color: #e2231a;
    width: 100%;
    cursor: pointer;
}
/*------企业用户登录------*/
.reg-other-person{
    margin-top: 25px;
    float: left;
}
.reg-other-person .reg-ohter-icon{
    display: inline-block;
    margin: 0 8px 2px 0;
    vertical-align: middle;
    width: 26px;
    height: 26px;
    background: url('@/assets/bckground/reg-icon.png') no-repeat;
    background-position: 0 -160px;
}
.enroll_cent .enroll_inputmsg .clearfix{
    width: 400px;
    height: auto;
    margin-top: 5px;
    /*background-color: chartreuse;*/
}
.clearfix:after{
    content: "";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
/*我已阅读并同意的容器*/
.enroll_cent .enroll_inputmsg .agreebox{
    margin-top: 15px;
    width: auto;
    min-width: 480px;
    height: 0px;
    margin-bottom: 20px;
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;

}
/*我已阅读并同意*/
.enroll_cent .enroll_inputmsg div .sim_checkbox{
    background-image: url("@/assets/bckground/reg-icon.png");
    background-position: -0px -400px;
    margin-right: 10px;
    width: 18px;
    height: 18px;
    border: 1px solid #ddd;
    z-index: 5;
}

</style>